﻿<!-- saved from url=(0014)about:internet -->
<html>
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/jKinect.js"></script>
    <script type="text/javascript" src="../../js/mocKinect.js"></script>
    <script type="text/javascript">
        var canvasF;
        var canvasZ;
        var contextF
        var contextZ;
        function drawSkeleton(jointsPosition) {
            try 
            {
                contextF.clearRect(0, 0, canvasF.width, canvasF.height);
                contextZ.clearRect(0, 0, canvasZ.width, canvasZ.height);
                contextF.lineWidth = "3";
                contextZ.lineWidth = "3";
                contextF.strokeStyle = "gray";
                contextZ.strokeStyle = "gray";
                for (var startJoint in jKinect.SKELETON_ARRAY) {
                    if (startJoint == undefined) continue;
                    for (var endJoint in jKinect.SKELETON_ARRAY[startJoint]) {
                        if (endJoint == undefined) continue;
                        contextF.beginPath();
                        contextF.moveTo(canvasF.width * jointsPosition[startJoint].X, canvasF.width * jointsPosition[startJoint].Y);
                        contextF.lineTo(
                            canvasF.width * jointsPosition[jKinect.SKELETON_ARRAY[startJoint][endJoint]].X,
                            canvasF.width * jointsPosition[jKinect.SKELETON_ARRAY[startJoint][endJoint]].Y);
                        contextF.stroke();
                        contextZ.beginPath();
                        contextZ.moveTo(canvasZ.width * 0.5 + canvasZ.width * jointsPosition[startJoint].Z, canvasZ.width * jointsPosition[startJoint].Y);
                        contextZ.lineTo(
                            canvasZ.width * 0.5 + canvasZ.width * jointsPosition[jKinect.SKELETON_ARRAY[startJoint][endJoint]].Z,
                            canvasZ.width * jointsPosition[jKinect.SKELETON_ARRAY[startJoint][endJoint]].Y);
                        contextZ.stroke();
                    }
                }
                for (var joint in jointsPosition) {
                    contextF.fillStyle = "green";
                    contextZ.fillStyle = "green";
                    contextF.beginPath();
                    contextZ.beginPath();
                    var diam = 7.0 - 5.0 * jointsPosition[joint].Z;
                    contextF.arc(
                        canvasF.width * jointsPosition[joint].X - 0.0 * diam,
                        canvasF.width * jointsPosition[joint].Y - 0.0 * diam,
                        diam,
                        0.0, 2.0 * Math.PI,
                        false);
                    contextZ.arc(
                        canvasZ.width * 0.5 + canvasZ.width * jointsPosition[joint].Z - 0.0 * diam,
                        canvasZ.width * jointsPosition[joint].Y - 0.0 * diam,
                        diam,
                        0.0, 2.0 * Math.PI,
                        false);
                    contextF.closePath();
                    contextZ.closePath();
                    contextF.fill();
                    contextZ.fill();
                }
            }
            catch (e) {
            }
        }

        function GetAccelerometerGetCurrentReading() {
            var acc = jKinect.accelerometerGetCurrentReading();
            $("#debugCamera").html(jKinect.writeObject(acc));
        }

        function BindGestures() {
            $("#debug").html("BindGestures");

            jKinect.bind("SkeletonFrameReadyCenteredScaled", drawSkeleton);
            jKinect.bind("InteractionFrameReady", function (args) {
                $("#interaction").html(jKinect.writeObject(args.HandPointers));

            });

            jKinect.bind("HandPositionScaled", function (position) {
                $("#debugHand").html(jKinect.writeObject(position));
            });

            jKinect.bind("HeadPosition", function (position) {

                $("#debugHead").html(jKinect.writeObject(position));
            });

            jKinect.bind("HandsDirection", function (left, right) {

                $("#debugHandsDirection").html(left + " , " + right);
            });
            jKinect.bind("Swipe", function (direction_0, direction_1, direction_2) {
                $("#debugSwipe").html(direction_2 + "<br/>" + direction_1 + "<br/>" + direction_0 + "<br/>");
            });

            jKinect.bind("PlayerStatus", function (status) {
                $("#debugPlayer").html(jKinect.writeObject(status));
            });
            //setInterval("jKinect.getNextSkeletonFrame()", 50);
            setInterval("GetAccelerometerGetCurrentReading()", 500);
        }

        $().ready(function () {
            $("#debug").html("Page loaded");
            canvasF = document.getElementById("skeletonF");
            contextF = canvasF.getContext("2d");
            canvasZ = document.getElementById("skeletonZ");
            contextZ = canvasZ.getContext("2d");
            mocKinect.mockingSurface = $(skeletonF);
            //jKinect.kinectHost = mocKinect;
		
			jKinect.initKinect(null,
			    function () { $("#askToSwitchTojKinectBrowser").modal(); },
                BindGestures
            );
        });

    </script>
</head>
<body>
    <h1>
        jKinect Diagnostic page</h1>
    <canvas id="skeletonF" width="500" height="500" style="float: right;">
    </canvas>
    <canvas id="skeletonZ" width="500" height="500" style="float: right;">
    </canvas>
    <div id="debug">
    </div>
    <h2>
        Interaction</h2>
    <div id="interaction">
    </div>
    <h2>
        Camera</h2>
    <input type="button" onclick="jKinect.setSeatedMode(false);" value="Normal mode"></button>
    <input type="button" onclick="jKinect.setSeatedMode(true);" value="Seated mode"></button>
    <div id="debugCamera">
    </div>
    <h2>
        PlayerStatus</h2>
    <div id="debugPlayer">
    </div>
    <h2>
        Head</h2>
    <div id="debugHead">
    </div>
    <h2>
        Hand</h2>
    <div id="debugHand">
    </div>
    <div id="debugHandsDirection">
    </div>
    <h2>
        Swipe</h2>
    <div id="debugSwipe">
    </div>
    <div id="askToSwitchTojKinectBrowser" class="modal hide">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                &times;</button>
            <h3>
                Explore this web site with your Kinect</h3>
        </div>
        <div class="modal-body">
            <p>
                Launch KinectWebBrowser to improve your experience:</p>
            <p>
                <a href="javascript:document.location='http://jkinect.com/jKinectBrowser/jKinectBrowser.application?url=' + encodeURI(document.location);"
                    class="btn btn-primary">Start KinectWebBrowser</a></p>
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>
</body>
</html>
